<script lang="ts" setup>
import { reactive, ref } from 'vue'
import { ElMessage, type ElButton, type FormInstance, type FormRules } from 'element-plus'
import { Plus} from '@element-plus/icons-vue'
import type { TabsPaneContext } from 'element-plus'
import Header from '@/views/content/util/header.vue'
import SButton from "@/views/content/util/button/sButton.vue"
interface res {
    data?: any;
    code?: number;
    message?: string;
}
interface img extends File {
    raw?: File
}
interface RuleForm {
    //基本信息
    id: number//门店id
    name: string//门店名称
    isShow:string//门店显示
    status: string//门店状态
    logoList:[]//logo图片
    logo: string//门店logo/base64
    linkMan: string//联系人
    phone: string//门店电话
    area: string//所属区域
    address: string//详细地址

    //门店信息
    desc: string//门店简介
    label:string[]//门店标签
    mainProduct: string//主营产品
    onePeopleMoney: number//人均消费
    merchantEnv: []//商家环境
    foodSafety: []//食品安全档案
    businessLicense: []//营业执照

}
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive<RuleForm>({
    //基本信息
    id: null,
    label:[],
    name: '',
    isShow:'',
    status: '',
    logoList:[],
    logo: '',
    linkMan: '',
    phone: '',
    area: '',
    address: '',

    //门店信息
    desc: '',
    mainProduct: '',
    onePeopleMoney: null,
    merchantEnv: [],
    foodSafety: [],
    businessLicense: [],

})
const areaOptions=[{
          "label": "四川",
          "value": 1,
          "children": [{
            "label": "成都",
            "value": 11,
            "children": [{
              "label": "郫都区",
              "value": 111
            }]
          }]
        }, {
          "label": "湖南",
          "value": 2
        }, {
          "label": "湖北",
          "value": 3
        }]
//表单需要校验项(必填)
const rules = reactive<FormRules<RuleForm>>({
    name: [{
            required: true,
            message: '字段值不可为空',
          }, {
            pattern: /^[一-龥]+$/,
            trigger: ['blur', 'change'],
            message: '门店名称不合法'
          }],
          logo: [{
            required: true,
            message: '字段值不可为空',
          }],
          linkMan: [{
            required: true,
            message: '字段值不可为空',
          }, {
            pattern: /^[一-龥]+$/,
            trigger: ['blur', 'change'],
            message: '联系人名称不合法'
          }],
          phone: [{
            required: true,
            message: '字段值不可为空',
          }, {
            pattern: /^[-]?\d+(\.\d+)?$/,
            trigger: ['blur', 'change'],
            message: ''
          }],
          area: [{
            required: true,
            message: '字段值不可为空',
          }],
          address: [{
            required: true,
            message: '字段值不可为空',
          }, {
            pattern: /^[一-龥]+$/,
            trigger: ['blur', 'change'],
            message: '详细地址不合法'
          }],
        },
     
    )
       
        
       
//-------------------------------------------------------------------tab标签---------------------------------------------------------
const activeName = ref('基本信息')

const handleClick = (tab: TabsPaneContext, event: Event) => {
    console.log(tab, event)
}
//-------------------------------------------------------------------文件上传-----------------------------------------------------------
const logoFileList=ref([])
const logoUploadHeaders= ref({})
const logoUploadData=ref({})

        
//---------------------------------------------------------------------表单常规信息------------------------------------------------------------------
//---------------------------------------------------------------------扩展信息----------------------------------------------------------------
const formSize = ref('default')
//提交表单
const submitForm = async (formEl: FormInstance | undefined) => {

    console.log(ruleForm)
    if (!formEl) return
    await formEl.validate(async (valid, fields) => {
        if (valid) {
            ElMessage({ type: 'success', message: '保存成功' })
        }
    })
}
</script>
<template>
    <div style="position: relative;left: 1%;">
        <div>
            <div>
                <Header title="商户信息"></Header>
            </div>
        </div>
        <div style="margin-top: 20px;">
            <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="120px" class="demo-ruleForm"
                :size="formSize" status-icon>

                <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
                    <el-tab-pane label="基本信息" name="基本信息">
                        <div class="el-tab-pane-content">
                            <el-form-item label="门店名称" prop="name" class="required">
                                <el-input v-model="ruleForm.name" type="text" placeholder="请输入门店名称" clearable style="width: 300px;"></el-input>
                            </el-form-item>
                            <el-form-item label="门店id" prop="id">
                                <el-input v-model="ruleForm.id" :disabled="true" type="text" style="width: 300px;"></el-input>
                            </el-form-item>
                            <el-form-item label="门店显示" prop="isShow">
                                <el-switch v-model="ruleForm.isShow" active-text="门店正常显示" inactive-text="门店已隐藏"
                                >
                                </el-switch>
                            </el-form-item>
                            <el-form-item label="门店状态" prop="status">
                                <el-switch v-model="ruleForm.status" active-text="正常营业" inactive-text="紧急关店"
                                   >
                                </el-switch>
                            </el-form-item>
                            <el-form-item label="门店logo" prop="logo" class="required">
                                <el-upload v-model:file-list="ruleForm.logoList" action="#" list-type="picture-card"
                                    :on-preview="''" :on-remove="''" :auto-upload="false"
                                    @change="">
                                    <el-icon>
                                        <Plus />
                                    </el-icon>
                                </el-upload>
                            </el-form-item>
                            <el-form-item label="联系人" prop="linkMan" class="required">
                                <el-input v-model="ruleForm.linkMan" type="text" placeholder="请填写联系人" clearable style="width: 300px;"></el-input>
                            </el-form-item>
                            <el-form-item label="门店电话" prop="phone" class="required">
                                <el-input v-model="ruleForm.phone" type="text" placeholder="请填写门店电话" clearable style="width: 300px;"></el-input>
                            </el-form-item>
                            <el-form-item label="所属区域" prop="area" class="required">
                                <el-cascader v-model="ruleForm.area" class="full-width-input" placeholder="请选择" :options="areaOptions"
                                    clearable>
                                </el-cascader>
                            </el-form-item>
                            <el-form-item label="详细地址" prop="address" class="required" style="width: 300px;">
                                <el-input v-model="ruleForm.address" type="text" placeholder="请填写详细地址" clearable><template
                                        #append>
                                        <el-button icon="Search" ></el-button>
                                    </template></el-input>
                            </el-form-item>
                        </div>
                    </el-tab-pane>

                    <el-tab-pane label="门店信息" name="门店信息">
                        <div class="el-tab-pane-content">
                            <el-form-item label="门店简介">
                                <el-input v-model="ruleForm.desc" type="textarea" style="width: 300px;" />
                            </el-form-item>


                            <el-form-item label="门店标签">
                                <el-checkbox-group v-model="ruleForm.label">
                                    <el-checkbox label="标签1" name="type" />
                                    <el-checkbox label="标签2" name="type" />
                                    <el-checkbox label="标签3" name="type" />
                                    <el-checkbox label="标签4" name="type" />
                                </el-checkbox-group>

                            </el-form-item>

                            <el-form-item label="主营产品">
                                <el-input v-model="ruleForm.mainProduct" style="width: 300px;" placeholder="请输入门店主营产品" />
                            </el-form-item>


                            <el-form-item label="人均消费">
                                <el-input-number style="width: 140px;" v-model="ruleForm.onePeopleMoney" :precision="2"
                                    :step="1" @change="" :min="0" />

                            </el-form-item>
                            <el-form-item label="商家环境">
                                <el-upload v-model:file-list="ruleForm.merchantEnv" action="#" list-type="picture-card"
                                    :on-preview="''" :on-remove="''" :auto-upload="false"
                                    @change="">
                                    <el-icon>
                                        <Plus />
                                    </el-icon>
                                </el-upload>
                            </el-form-item>

                            <el-form-item label="食品安全档案">
                                <el-upload v-model:file-list="ruleForm.foodSafety" action="#" list-type="picture-card"
                                    :on-preview="''" :on-remove="''" :auto-upload="false"
                                    @change="">
                                    <el-icon>
                                        <Plus />
                                    </el-icon>
                                </el-upload>

                            </el-form-item>
                            <el-form-item label="营业执照">
                                <el-upload v-model:file-list="ruleForm.businessLicense" action="#" list-type="picture-card"
                                    :on-preview="''" :on-remove="''" :auto-upload="false"
                                    @change="">
                                    <el-icon>
                                        <Plus />
                                    </el-icon>
                                </el-upload>

                            </el-form-item>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="其他信息" name="其他信息">
                        <div>
                        </div>
                    </el-tab-pane>
                </el-tabs>
            </el-form>
        </div>
        <el-divider />
        <div style="position: relative;left: 48%;">
            <SButton  @click="submitForm(ruleFormRef)" title="保存"></SButton>
        </div>
    </div>
</template>


<style scoped lang="scss">
.el-tab-pane-content{
    padding: 20px 0px;
    background-color: rgba(0, 0, 0, 0.01);
    border-radius: 10px;
    border: 1px rgba(248, 29, 5, 0.079) solid;
}
::v-deep .el-tabs__item.is-active {
  color: $seleceted;
  opacity: 1;
}
::v-deep .el-tabs__item:hover {
  color: $seleceted;
  cursor: pointer;
  opacity: 1;
}

::v-deep .el-tabs__active-bar {
  background-color:$seleceted;
}


// 控制switch
// ::v-deep .el-switch.is-checked .el-switch__core .el-switch__action {
//   left: 1px !important;
// }
 
// ::v-deep .el-switch__core .el-switch__action {
//   left: calc(100% - 17px) !important;
// }
</style>